<template>
  <div class="container">
    <el-row class="member-switch">
      <el-col class="t-l-r">
        <el-switch
          v-model="member"
          class="fr"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="filterChange()"/>
        <span class="fr" style="margin-right: 10px;">只看会员</span>
        <el-button class="fr" size="mini" style="margin-right:20px;" icon="el-icon-refresh" @click="refresh"/>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="柬文" name="first">
        <el-row>
          <el-col>
            <el-table v-loading="listLoading1" :data="tableData1" element-loading-text="Loading" border>
              <el-table-column :index="indexMethod1" align="center" type="index" width="60" label="编号"/>
              <el-table-column align="center" prop="readDuration" label="用户类型">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.memberId == 0 || !scope.row.memberId" type="info">普通用户
                  </el-tag>
                  <el-tag v-else type="success">注册会员</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="userId" label="用户ID"/>
              <el-table-column align="center" prop="memberId" label="会员ID">
                <template slot-scope="scope">
                  <span>{{ (scope.row.memberId == 0 || !scope.row.memberId) ? '--' : scope.row.memberId }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="注册时间">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.memberId && scope.row.memberId != 0">{{ scope.row.registerTime | fmtdate }}</span>
                  <span v-if="scope.row.memberId == 0 || !scope.row.memberId">--</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="最后使用时间">
                <template slot-scope="scope">
                  <span>{{ scope.row.createTime| fmtdate }}</span>
                </template>
              </el-table-column>
              <el-table-column header-align="center" label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    plain
                    size="mini"
                    @click="gotoPortrait(scope.row.userId, scope.row.memberId)">用户画像</el-button>
                  <el-button
                    v-if="scope.row.memberId"
                    plain
                    size="mini"
                    type="primary"
                    @click="goToDetail(scope.row.memberId)">会员详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <div v-if="total1 > 0" class="block fr p-t-15 p-b-15">
          <el-pagination
            :current-page="listQuery1.currentPage"
            :page-sizes="[10, 15, 20]"
            :page-size="20"
            :total="total1"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="(val) => sizeChange(val, listQuery1, getList1)"
            @current-change="(val) => pageChange(val, listQuery1, getList1)"/>
        </div>
      </el-tab-pane>
      <el-tab-pane label="中文" name="tow">
        <el-row>
          <el-col>
            <el-table v-loading="listLoading2" :data="tableData2" element-loading-text="Loading" border>
              <el-table-column :index="indexMethod2" align="center" type="index" width="60" label="编号"/>
              <el-table-column align="center" prop="readDuration" label="用户类型">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.memberId == 0 || !scope.row.memberId" type="info">普通用户
                  </el-tag>
                  <el-tag v-else type="success">注册会员</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="userId" label="用户ID"/>
              <el-table-column align="center" prop="memberId" label="会员ID">
                <template slot-scope="scope">
                  <span>{{ (scope.row.memberId == 0 || !scope.row.memberId) ? '--' : scope.row.memberId }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="注册时间">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.memberId && scope.row.memberId != 0">{{ scope.row.registerTime | fmtdate }}</span>
                  <span v-if="scope.row.memberId == 0 || !scope.row.memberId">--</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="最后使用时间">
                <template slot-scope="scope">
                  <span>{{ scope.row.createTime| fmtdate }}</span>
                </template>
              </el-table-column>
              <el-table-column header-align="center" label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    plain
                    size="mini"
                    @click="gotoPortrait(scope.row.userId, scope.row.memberId)">用户画像</el-button>
                  <el-button
                    v-if="scope.row.memberId"
                    plain
                    size="mini"
                    type="primary"
                    @click="goToDetail(scope.row.memberId)">会员详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <div v-if="total2 > 0" class="block fr p-t-15 p-b-15">
          <el-pagination
            :current-page="listQuery2.currentPage"
            :page-sizes="[10, 15, 20]"
            :page-size="20"
            :total="total2"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="(val) => sizeChange(val, listQuery2, getList2)"
            @current-change="(val) => pageChange(val, listQuery2, getList2)"/>
        </div>
      </el-tab-pane>
      <el-tab-pane label="英文" name="three">
        <el-row>
          <el-col>
            <el-table v-loading="listLoading3" :data="tableData3" element-loading-text="Loading" border>
              <el-table-column :index="indexMethod3" align="center" type="index" width="60" label="编号"/>
              <el-table-column align="center" prop="readDuration" label="用户类型">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.memberId == 0 || !scope.row.memberId" type="info">普通用户
                  </el-tag>
                  <el-tag v-else type="success">注册会员</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="userId" label="用户ID"/>
              <el-table-column align="center" prop="memberId" label="会员ID">
                <template slot-scope="scope">
                  <span>{{ (scope.row.memberId == 0 || !scope.row.memberId) ? '--' : scope.row.memberId }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="注册时间">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.memberId && scope.row.memberId != 0">{{ scope.row.registerTime | fmtdate }}</span>
                  <span v-if="scope.row.memberId == 0 || !scope.row.memberId">--</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="最后使用时间">
                <template slot-scope="scope">
                  <span>{{ scope.row.createTime| fmtdate }}</span>
                </template>
              </el-table-column>
              <el-table-column header-align="center" label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    plain
                    size="mini"
                    @click="gotoPortrait(scope.row.userId, scope.row.memberId)">用户画像</el-button>
                  <el-button
                    v-if="scope.row.memberId"
                    plain
                    size="mini"
                    type="primary"
                    @click="goToDetail(scope.row.memberId)">会员详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <div v-if="total3 > 0" class="block fr p-t-15 p-b-15">
          <el-pagination
            :current-page="listQuery3.currentPage"
            :page-sizes="[10, 15, 20]"
            :page-size="20"
            :total="total3"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="(val) => sizeChange(val, listQuery3, getList3)"
            @current-change="(val) => pageChange(val, listQuery3, getList3)"/>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getRecentActiveUserApi, getCountApi } from '@/api/user-analysis.js';
export default {
  name: 'RecentActiveUser',
  data() {
    return {
      minutes: 5,
      minutes2: 30,
      totalNum: {
        zh5: 0,
        zh30: 0,
        km5: 0,
        km30: 0,
        en5: 0,
        en30: 0
      },
      totalLoading: true,
      activeName: 'first',
      listLoading1: false,
      listLoading2: false,
      listLoading3: false,
      tableData1: [],
      tableData2: [],
      tableData3: [],
      listQuery1: {
        currentPage: 1,
        pageSize: 20,
        lan: 2 // 1 中文  2 柬文 3 英文
      },
      listQuery2: {
        currentPage: 1,
        pageSize: 20,
        lan: 1 // 1 中文  2 柬文 3 英文
      },
      listQuery3: {
        currentPage: 1,
        pageSize: 20,
        lan: 3 // 1 中文  2 柬文 3 英文

      },
      member: false,
      total1: 0,
      total2: 0,
      total3: 0,
      langMap: {
        1: '中文',
        2: '柬文',
        3: '英文'
      },
      isCache: false,
      timer: null
    };
  },
  watch: {
    $route(to, from) {
      if (from.name == 'UserPortrait' || from.name == 'userDetail') {
        this.isCache = true;
      } else {
        this.isCache = false;
      }
    }
  },
  activated() {
    if (!this.isCache) {
      this.activeName = 'first';
      this.refresh();
    }
    this.timer = setInterval(() => {
      if (this.totalLoading) {
        return;
      } else {
        this.getTotal();
      }
    }, 1000);
  },
  deactivated() {
    clearInterval(this.timer);
  },
  methods: {
    refresh() {
      this.resetQuery();
      this.getTotal();
      this.getList1();
      this.getList2();
      this.getList3();
    },

    getTotal() {
      this.totalLoading = true;
      getCountApi({ minutes: this.minutes }).then(res => {
        if (res.code == 200) {
          this.totalNum.zh5 = res.data['1'] || 0;
          this.totalNum.km5 = res.data['2'] || 0;
          this.totalNum.en5 = res.data['3'] || 0;
          this.totalLoading = false;
        } else {
          this.totalLoading = false;
        }
      }).catch(e => {
        this.totalLoading = false;
      });
      getCountApi({ minutes: this.minutes2 }).then(res => {
        if (res.code == 200) {
          this.totalNum.zh30 = res.data['1'] || 0;
          this.totalNum.km30 = res.data['2'] || 0;
          this.totalNum.en30 = res.data['3'] || 0;
          this.totalLoading = false;
        } else {
          this.totalLoading = false;
        }
      }).catch(e => {
        this.totalLoading = false;
      });
    },
    resetQuery() {
      this.member = false;
      this.tableData1 = [];
      this.listQuery1 = {
        currentPage: 1,
        pageSize: 20,
        lang: 2
      };
      this.total1 = 0;

      this.tableData2 = [];
      this.listQuery2 = {
        currentPage: 1,
        pageSize: 20,
        lang: 1
      };
      this.total2 = 0;

      this.tableData3 = [];
      this.listQuery3 = {
        currentPage: 1,
        pageSize: 20,
        lang: 3
      };
      this.total3 = 0;
    },
    getList1() {
      this.listLoading1 = true;
      const obj = Object.assign({}, this.listQuery1, { member: this.member });
      getRecentActiveUserApi(obj).then(res => {
        if (res.code == 200) {
          this.listLoading1 = false;
          this.tableData1 = res.data.rows || 0;
          this.total1 = Number(res.data.total) || 0;
        } else {
          this.listLoading1 = false;
        }
      }).catch(e => {
        this.listLoading1 = false;
      });
    },
    getList2() {
      this.listLoading2 = true;
      const obj = Object.assign({}, this.listQuery2, { member: this.member });
      getRecentActiveUserApi(obj).then(res => {
        if (res.code == 200) {
          this.listLoading2 = false;
          this.tableData2 = res.data.rows || 0;
          this.total2 = Number(res.data.total) || 0;
        } else {
          this.listLoading2 = false;
        }
      }).catch(e => {
        this.listLoading2 = false;
      });
    },
    getList3() {
      this.listLoading3 = true;
      const obj = Object.assign({}, this.listQuery3, { member: this.member });
      getRecentActiveUserApi(obj).then(res => {
        if (res.code == 200) {
          this.listLoading3 = false;
          this.tableData3 = res.data.rows || 0;
          this.total3 = Number(res.data.total) || 0;
        } else {
          this.listLoading3 = false;
        }
      }).catch(e => {
        this.listLoading3 = false;
      });
    },

    filterChange() {
      this.listQuery1.currentPage = 1;
      this.getList1();
      this.listQuery2.currentPage = 1;
      this.getList2();
      this.listQuery3.currentPage = 1;
      this.getList3();
    },

    goToDetail(memberId) {
      this.$router.push({
        path: '/userExceptionFilter/userDetail',
        query: {
          memberId
        }
      });
    },

    gotoPortrait(userId, memberId) {
      if (memberId == 0 || !memberId) {
        this.$router.push({
          path: '/recommend_analysis/UserPortrait',
          query: {
            userId
          }
        });
      } else {
        this.$router.push({
          path: '/recommend_analysis/UserPortrait',
          query: {
            memberId
          }
        });
      }
    },

    sizeChange(val, query, cb) {
      query.pageSize = val;
      cb();
    },

    pageChange(val, query, cb) {
      query.currentPage = val;
      cb();
    },
    indexMethod1(index) {
      return index + ((this.listQuery1.currentPage - 1) * this.listQuery1.pageSize) + 1;
    },
    indexMethod2(index) {
      return index + ((this.listQuery2.currentPage - 1) * this.listQuery2.pageSize) + 1;
    },
    indexMethod3(index) {
      return index + ((this.listQuery3.currentPage - 1) * this.listQuery3.pageSize) + 1;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 30px 15px 15px 15px;

  .member-switch {
      padding: 15px 0;
  }

	.total-title{
		display: inline-block;
		width: 150px;
		text-align: left;
	}
  
	.total-num{
		display: inline-block;
		width: 100px;
		margin-right: 20px;
	}
     
  .t-l-r {
    text-align: right;
  }
}
</style>
